<template>
  <a-modal 
    v-model:visible="props.visible" 
    title="选择头像" 
    @ok="handleOk" 
    @cancel="handleCancel"
    class="user-avatar-modal">
    <a-radio-group
      v-model:value="selected">
      <a-radio 
        v-for="(avatar, index) in props.avatars" 
        :key="'avatar' + index"
        :value="avatar">
        <img v-if="avatar" :src="avatar" alt="avatar" class="image"/>
      </a-radio>
    </a-radio-group>
  </a-modal>
</template>

<script setup lang="ts">
import { defineEmits, ref, defineProps } from "vue";

const props = defineProps({
  avatars: {
    type: Array<any>,
    default: () => [
      "https://goalgold.obs.ap-southeast-1.myhuaweicloud.com/avatar/101.jpg",
      "https://goalgold.obs.ap-southeast-1.myhuaweicloud.com/avatar/102.jpg",
      "https://goalgold.obs.ap-southeast-1.myhuaweicloud.com/avatar/103.jpg",
      "https://goalgold.obs.ap-southeast-1.myhuaweicloud.com/avatar/104.jpg",
      "https://goalgold.obs.ap-southeast-1.myhuaweicloud.com/avatar/105.jpg",
      "https://goalgold.obs.ap-southeast-1.myhuaweicloud.com/avatar/106.jpg",
      "https://goalgold.obs.ap-southeast-1.myhuaweicloud.com/avatar/107.jpg",
      "https://goalgold.obs.ap-southeast-1.myhuaweicloud.com/avatar/108.jpg",
    ],
  },
  visible: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["ok", "cancel"])
const selected = ref([]);

function handleOk() {
  emits("ok", selected.value);
}

function handleCancel() {
  emits("cancel");
}
</script>
<style lang="less">
.user-avatar-modal {
  .ant-radio-wrapper {
    margin-bottom: 10px;
  }
  .ant-radio {
    display: none!important;;
  }
  .ant-radio-input { 
    display: none;
  }
  .image {
    width: 80px;
    height: 80px;
    border: 1px solid transparent;
  }
  .ant-radio-wrapper-checked {
    .image {
      border: 3px solid #51b6ee;
      box-shadow: 0 0 10px #51b6ee;
    }
  }
}

</style>
